import React, { useState } from "react";
import indexcss from "@/assets/css/index.module.less";
import decade from "@/assets/img/十年大礼包.png";
import BigSearch from "@/components/BigSearch";
import { Carousel } from "antd";
import swiper1 from "@/assets/img/swiper-1.webp";
import swiper2 from "@/assets/img/swiper-2.webp";
import swiper3 from "@/assets/img/swiper-3.webp";
import swiper4 from "@/assets/img/swiper-4.webp";
import swiper5 from "@/assets/img/swiper-5.webp";
const swiperImg = [swiper1, swiper2, swiper3, swiper4, swiper5];
const contentStyle: React.CSSProperties = {
  margin: 0,
  height: "245px",
  color: "#fff",
  textAlign: "center",
};
const imgData =
  "";
function Index() {
  // 轮播图
  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  };
  // 滑过显示隐藏
  const [isHovering, setIsHovering] = useState(false);
  // 处理mouseenter事件
  const handleMouseEnter = () => {
    setIsHovering(true);
  };

  // 处理mouseleave事件
  const handleMouseLeave = () => {
    setTimeout(() => {
      setIsHovering(false);
    }, 500);
  };
  return (
    <div className={indexcss.box}>
      <div className={indexcss.header}>
        <div className={indexcss.left}>
          <img src={decade} className={indexcss.leftImg} />
        </div>
        <div className={indexcss.center}>
          <BigSearch></BigSearch>
          <div className={indexcss.navbox}>
            <span>邀请函</span>
            <span>h5模版</span>
            <span>招聘</span>
            <span>大暑</span>
            <span>公众号</span>
            <span>抽奖</span>
            <span>旅行相册</span>
          </div>
        </div>
        <div className={indexcss.right} onMouseEnter={handleMouseEnter}>
          <div>
            <p style={{ marginTop: "10px" }}>
              <span style={{ fontWeight: "bold", fontSize: "24px" }}>18</span>/
              <span style={{ fontWeight: "600" }}>7</span>&nbsp;&nbsp;
              <span style={{ fontWeight: "600" }}>2024</span>
            </p>
            <div>
              <span style={{ fontSize: "13px", color: "#a5a5a5" }}>
                周四&nbsp;农历六月十三
              </span>
            </div>
          </div>
          <div style={{ marginTop: "30px" }}>
            <img src={imgData} alt="" />
            &nbsp;
            <span style={{ fontWeight: "500" }}>人类月球日</span>
          </div>
        </div>
        {isHovering && (
          <div className={indexcss.calendarBox} onMouseLeave={handleMouseLeave}>
            <div className={indexcss.calendarS}>
              <iframe
                src="//calendar.eqxiu.com/cl/mini?full=1"
                width="984"
                height="600"
                title="calendar"
                frameBorder="0"
              ></iframe>
            </div>
          </div>
        )}
      </div>
      {/* 轮播图 */}
      <div className={indexcss.swipers}>
        <Carousel afterChange={onChange} arrows={true} autoplay={true}>
          {swiperImg.map((imgUrl, index) => (
            <div style={contentStyle}>
              <img key={index} src={imgUrl} alt={`Swiper Image ${index + 1}`} />
            </div>
          ))}
        </Carousel>
      </div>
      {/* 轮播列表 */}
    </div>
  );
}

export default Index;
